<template>
  <div class="label-box-content">
    <el-row :gutter="30" type="flex">
      <el-col :span="8">
        <NewCard title="专家类型" :isright="true">
          <template slot="right">
            <el-select v-model="selectValue" @change="selecttype" style="width: 120px">
              <el-option
                v-for="item in categorylist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>

          <div class="leftMenu">
            <!-- closable:删除按钮 -->
            <el-tag
              :key="index"
              v-for="(type, index) in consultTypeList"
              :disable-transitions="false"
              :class="{ tagActive: current.currentIndex === index }"
              @close="handleClose(type)"
              @click="handleClick(type, index)"
            >
              <p
                @click="current.currentName = type.name"
                @dblclick="dblclickInput(index)"
                v-if="tagInput === index ? false : true"
              >{{ type.name }}</p>
              <el-input
                v-else
                v-model="type.name"
                @keyup.enter.native="handleInput(type, type.name)"
                @blur="handleInput(type, type.name)"
                ref="dbtagInput"
                clearable
              ></el-input>
            </el-tag>
          </div>
        </NewCard>
      </el-col>

      <el-col :span="8">
        <div class="infoExpert">
          <NewCard title="专家职称">
            <el-tag
              :key="index"
              v-for="(jobTitle, index) in expertJobTitleList"
              :disable-transitions="false"
              :class="{ tagActive: sencendIndex === index }"
              @click="secendClick(jobTitle, index)"
            >
              <p
                @dblclick="dblclickJobInput(index)"
                v-if="jobInput === index ? false : true"
              >{{ jobTitle.name }}</p>
              <el-input
                v-else
                v-model="jobTitle.name"
                @keyup.enter.native="handleJobInput(jobTitle, jobTitle.name)"
                @blur="handleJobInput(jobTitle, jobTitle.name)"
                ref="dbJobInput"
                clearable
              ></el-input>
              <p class="tag-icon">
                <el-upload
                  ref="upload"
                  list-type="picture"
                  accept=".jpg, .png"
                  :action="'#'"
                  :auto-upload="false"
                  :show-file-list="false"
                  :on-change="getFile"
                  :before-remove="() => false"
                  @click.native="getsecendFileId(jobTitle)"
                ></el-upload>
              </p>
            </el-tag>

            <!-- <JobTitle
              :expertJobTitleList="expertJobTitleList"
              :expertTypeList="expertTypeList"
              :dynamicTags="dynamicTags"
              :jobTitleList.sync="jobTitleList"
              :jobTitlePid="jobTitlePid"
              :current="current"
              :jobTitleSelect="jobTitleSelect"
              @AddExpertOffice="AddExpertOffice"
              @getExpertTypeList="getExpertTypeList"
              @handleClick="handleClick"
              @expertClick="expertClick"
            ></JobTitle>-->
          </NewCard>
        </div>
      </el-col>

      <el-col :span="8">
        <NewCard title="专家证书">
          <div class="expertRev">
            <div class="editTem">
              <el-button
                @click="
                  passMode = true;
                  opinionbtn();
                "
                type="text"
              >审核意见</el-button>
              <el-button
                @click="
                  classMode = true;
                  expertlevel();
                "
                type="text"
                style="margin-left: 8px"
              >专家等级</el-button>
            </div>
            <el-tag
              :key="index"
              v-for="(type, index) in rightCert"
              :disable-transitions="false"
              :class="{ tagActive: current.currentIndex === index }"
              @close="handleClose(type)"
              @click="handleClick(type, index)"
            >
              <p
                @click="current.currentName = type.name"
                @dblclick="dblclickInput(index)"
                v-if="tagInput === index ? false : true"
              >{{ type.name }}</p>
              <el-input
                v-else
                v-model="type.name"
                @keyup.enter.native="handleInput(type, type.name)"
                @blur="handleInput(type, type.name)"
                ref="dbtagInput"
                clearable
              ></el-input>
            </el-tag>
            <ComAddButton1 label="添加证书"></ComAddButton1>

            <!-- 右边弹出抽屉层 -->
            <Comdrawer size="60%" title="审核意见模板" @eventColse="passModeClose" :drawer="passMode">
              <div class="drawerMain">
                <!-- closable:删除按钮 -->
                <!-- <el-tag
                  :key="index"
                  v-for="(tag, index) in auditOpinion"
                  :disable-transitions="false"
                  @close="opinClose(tag)">
                  {{ tag.title }}
                </el-tag>-->
                <el-table ref="singleTable" :data="auditOpinion" style="width: 100%">
                  <el-table-column type="index" label="序号" width="60"></el-table-column>
                  <el-table-column label="审核意见">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.title" placeholder="请输入..."></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="60">
                    <template slot-scope="scope">
                      <el-button type="text" @click="opinClose(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <SubBtn>
                  <template slot="btn">
                    <el-input
                      class="input-new-tag"
                      v-model="opinionValue"
                      ref="opinionInput"
                      size="medium"
                      effect="plain"
                      placeholder="请添加审核意见模板"
                      @keyup.enter.native="opinionInputConfirm"
                      v-show="auditInputShow"
                    ></el-input>
                    <el-button round>新增</el-button>
                    <el-button type="primary" round>保存</el-button>
                  </template>
                </SubBtn>
              </div>
            </Comdrawer>
            <Comdrawer size="60%" title="专家等级模板" @eventColse="classModeClose" :drawer="classMode">
              <div class="drawerMain classMode">
                <!-- closable:删除按钮 -->
                <!-- <el-tag
                  :key="tag.id"
                  v-for="tag in gradeTem"
                  :disable-transitions="false"
                  @close="gradeClose(tag)">
                  {{ tag.levelName }}
                </el-tag>-->
                <el-table ref="singleTable" :data="gradeTem" style="width: 100%">
                  <el-table-column label="专家等级" width="150">
                    <template slot-scope="scope">
                      <el-input
                        @blur="changgename(scope.row.levelName)"
                        v-model="scope.row.levelName"
                        placeholder="请输入..."
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="描述">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.describable" placeholder="请输入..."></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="60">
                    <template slot-scope="scope">
                      <el-button type="text">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <div class="bottomBtn">
                  <el-button @click="clickbAddExpert" v-if="expertBtnShow">+添加专家</el-button>
                </div>

                <!-- <SubBtn>
                  <template slot="btn">
                    <el-input
                      class="input-new-tag"
                      v-model="gradeValue"
                      ref="gradeInput"
                      size="medium"
                      effect="plain"
                      placeholder="请添加专家等级模板"
                      @keyup.enter.native="gradeInputConfirm"
                      v-show="gradeInputShow"
                    >
                    </el-input>
                    <el-button round>添加等级</el-button>
                    <el-button type="primary" round>保存</el-button>
                  </template>
                </SubBtn>-->
              </div>
            </Comdrawer>
          </div>
        </NewCard>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import ComAddButton from "./ComAddButton.vue";
import Comdrawer from "@/wss/components/Comdrawer.vue";
import JobTitle from "./jobTitle.vue";
import ComTable from "../../../../components/comTable.vue";
import SubBtn from "@/wss/components/subBtn.vue";
import ComAddButton1 from "./ComAddButton1.vue";

import {
  getExpertOfficeListApi,
  AddExpertOfficeApi,
  EditExpertOfficeApi,
  AddExpertcertification,
  getConsultTypeListApi,
  getexpertCertificateListApi,
  getopinionListApi,
  addopinionListApi,
  deleteopinionListApi,
  getExpertlevelListApi,
  addExpertlevelListApi,
  deletExpertlevelListApi,
  getopinioneditListApi
} from "@/wss/newApi_3-24/work/expert.js";
import { getProjectTypelistApi } from "@/wss/newApi_3-24/work/projectType.js";

export default {
  name: "expertCert",
  components: {
    NewCard,
    ComAddButton,
    Comdrawer,
    JobTitle,
    ComTable,
    SubBtn,
    ComAddButton1
  },
  data() {
    return {
      selectValue: "咨询类专家",
      //专家类型
      categorylist: [
        {
          label: "咨询类专家",
          value: 5
        },
        {
          label: "项目类专家",
          value: 6
        }
      ],
      //默认类型
      valuetype: "",
      //分页参数
      pageing: { pageNum: 1, pageSize: 100 },
      currentPage4: 1,
      total: 0,
      //获取的专家类型列表
      expertTypeList: [],
      //获取的专家职称列表
      expertJobTitleList: [],
      //获取的专家职index高亮
      sencendIndex: "",
      //获取的咨询类别列表
      consultTypeList: [],
      //筛选后的专家职称列表 prpos
      jobTitleList: [],
      //当前选中的专家类型 prpos
      jobTitleSelect: "",
      //当前选中的专家类型的id(专家职称的pid) prpos
      jobTitlePid: "",
      //选择的专家类型index和名称
      current: {
        currentIndex: 0,
        currentName: ""
      },
      //收集输入框的数据
      inputValue: {},

      //双击专家类型tag显示输入框
      tagInput: "",
      //双击后当前编辑的id和name内容
      editDbInput: {
        id: "",
        name: ""
      },

      //专家类型
      dynamicTags: [],
      ruleForm: {
        name: "",
        officeId: ""
      },

      //判断添加类型是否显示
      inputVisible: false,

      //专家证书
      rightCert: [],
      //右侧专家证书 选择类型
      jTitleSelect: "",
      //右侧专家证书 证书名称
      rightValue: "",
      //默认激活第一个
      activeMenu: "1",
      activeList: "1",
      searchlist: "",

      //中间个人信息尺寸
      size: "",

      //右侧弹出层是否显示
      passMode: false,
      classMode: false,

      //审核意见模板
      auditOpinion: [],
      //审核意见模板输入框显示隐藏
      auditInputShow: false,
      //审核意见模板 输入的值
      opinionValue: "",

      //专家等级模板
      gradeTem: [],
      //专家等级模板输入框显示隐藏
      gradeInputShow: false,
      //专家等级模板 输入的值
      gradeValue: "",

      expertBtnShow: true, //专家等级底部按钮
      //底部输入表单
      value: ""
    };
  },
  mounted() {
    // this.getExpertTypeList(); //获取专家类型职称列表
    this.getConsultTypeList(); //获取咨询类别的数据
    this.expertCertificatefn();
  },
  methods: {
    //下拉选择咨询还是项目类型
    selecttype(value) {
      console.log(value, "123");
      if (value == "5") {
        this.getConsultTypeList(); //2咨询专家
      } else if (value == "6") {
        console.log("123");
        this.getProjectTypelistFn(); //3项目专家
      } else {
        this.getConsultTypeList(); //1编辑专家
      }
    },
    //专家等级添加
    clickbAddExpert() {},
    changgename(val) {
      console.log(val, "1111");
    },
    //专家类型 双击显示输入框
    dblclickInput(index) {
      // console.log(index);
      setTimeout(() => {
        this.$refs.dbtagInput[0].focus();
      }, 50);
      this.tagInput = index;
    },
    //专家类型 失去焦点或者回车修改名称
    handleInput(type, typeName) {
      this.editDbInput.id = type.id;
      this.editDbInput.name = type.name;
      // console.log(this.editDbInput);
      if (!typeName) {
        this.$message.error("输入值不能为空！");
        type.name = this.current.currentName;
        this.tagInput = "";
      } else {
        //修改的接口
        this.EditExpertOffice(this.editDbInput);
        this.tagInput = "";
      }
    },

    //左侧专家类型 删除某个类型
    handleClose(type) {},
    //左侧专家类型 input-new-tag"
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    //左侧专家类型选中一个标签
    handleClick(type, index) {
      // 对应职称查询
      let datatype = {
        type: this.valuetype,
        pid: type.pid
      };
      this.getExpertTypeList(datatype);
      this.jobTitleSelect = type;
      this.current.currentIndex = index;
    },
    // *****************************************
    expertClick(tag) {
      console.log(tag, "GGGGG");
    },
    //右侧专家证书 input
    rightInputConfirm() {
      let rightValue = this.rightValue;
      if (rightValue) {
        this.rightCert.push(rightValue);
      }
      this.rightValue = "";
    },
    //右侧专家证书  删除某个证书
    certClose(tag) {
      this.$confirm("此操作将永久删除所选项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.rightCert.splice(this.rightCert.indexOf(tag), 1);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // ***************************专家证书****************************************end

    // ***************************审核意见模板****************************************
    //右侧抽屉审核意见模板 显示隐藏
    passModeClose() {
      this.passMode = false;
    },
    //右侧抽屉 审核意见模板
    opinionInputConfirm() {
      let opinionValue = {
        title: this.opinionValue,
        type: "6"
      };
      this.addopinionListfn(opinionValue);
      this.opinionValue = "";
      this.auditInputShow = false;
    },
    //右侧抽屉 删除某个审核意见模板
    async opinClose(tag) {
      console.log(tag, "aaaa");
      let { rows, msg, code } = await deleteopinionListApi(tag.id);
      if (code == 200) {
        this.$message({
          message: "删除成功",
          type: "success"
        });
        this.opinionbtn(); //查询审核意见模板
      } else {
        this.$message({
          message: "操作失败",
          type: "success"
        });
      }
      // this.$confirm("此操作将永久删除所选项, 是否继续?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
      //     this.deleteopinionList(tag.id);
      //   })
      //   .catch(() => {
      //     this.$message({
      //       type: "info",
      //       message: "已取消删除",
      //     });
      //   });
    },

    // ***************************审核意见模板****************************************end

    // ***************************专家等级模板****************************************

    //右侧抽屉专家等级模板 显示隐藏
    classModeClose() {
      this.classMode = false;
    },
    //右侧抽屉 专家等级模板
    gradeInputConfirm() {
      let gradeValue = {
        levelName: this.gradeValue
      };
      this.addexpertlevel(gradeValue);
      this.gradeValue = "";
      this.gradeInputShow = false;
    },
    //右侧抽屉 删除某个专家等级模板
    gradeClose(tag) {
      this.$confirm("此操作将永久删除所选项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.gradeTem.splice(this.gradeTem.indexOf(tag), 1);
          this.deletExpertlevelList(tag.id);
          // this.$message({
          //   type: "success",
          //   message: "删除成功!",
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // ***************************专家等级模板**************************************** end

    // 获取专家职称列表
    async getExpertTypeList(data) {
      let result = await getExpertOfficeListApi(data);
      // 1 专家类型 2 专家职称

      if (result.code == 200) {
        //console.log(result,"123456");
        let type = result.rows;
        let jobTitle = result.rows;
        this.dynamicTags = type;
        this.expertTypeList = type;
        this.expertJobTitleList = jobTitle;
      }
    },

    // 添加专家类型职称
    async AddExpertOffice(data) {
      console.log(data, "data");
      // let result = await AddExpertOfficeApi(data);
      // console.log(result);
      // if (result.code == 200) {
      //   this.$message({
      //     message: "添加成功",
      //     type: "success",
      //   });
      // } else {
      //   // this.$message.error("提交失败");
      //   return Promise.reject(result.message);
      // }
    },

    //修改专家类型职称
    async EditExpertOffice(data) {
      let result = await EditExpertOfficeApi(data);
      if (result.code == 200) {
        this.$message({
          message: "修改成功",
          type: "success"
        });
      } else {
        // this.$message.error("提交失败");
        return Promise.reject(result.message);
      }
    },

    //提交
    async addexpert(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.ruleForm, "lllll");
          this.AddExpertcertificationfn(this.ruleForm);
        } else {
          this.$message({
            message: "请填写信息",
            type: "warning"
          });
          return false;
        }
      });
    },

    //新增专家类型职称
    async AddExpertcertificationfn(data) {
      let { code, msg } = await AddExpertcertification(data);
      if (code == 200) {
        this.$message({
          message: msg,
          type: "success"
        });
        this.ruleForm.name = "";
        this.ruleForm.officeId = "";
        this.expertCertificatefn(data.id);
      }
    },

    //查询专家证书
    async expertCertificatefn(id) {
      let { rows, code } = await getexpertCertificateListApi(id);
      if (code == 200) {
        this.rightCert = rows;
      }
    },

    //查询审核意见模板
    async opinionbtn() {
      let { rows, code, total } = await getopinionListApi();
      if (code == 200) {
        let arr = rows.filter(item => {
          return item.type == "5" || item.type == "6";
        });
        this.auditOpinion = arr;
        this.total = total;
      }
    },
    //修改审核意见模板
    async getopinioneditListApifn() {
      let { rows, code, total } = await getopinioneditListApi();
      if (code == 200) {
        let arr = rows.filter(item => {
          return item.type == "5" || item.type == "6";
        });
        this.auditOpinion = arr;
        this.total = total;
      }
    },

    //新增审核意见模板的
    async addopinionListfn(data) {
      let { rows, code, total } = await addopinionListApi(data);
      if (code == 200) {
        this.$message({
          message: "添加成功",
          type: "success"
        });
        this.opinionbtn(); //查询审核意见模板
      }
    },

    //删除审核意见模板的
    async deleteopinionList(data) {
      let { rows, msg, code } = await deleteopinionListApi(data);
      if (code == 200) {
        this.$message({
          message: "删除成功",
          type: "success"
        });
        this.opinionbtn(); //查询审核意见模板
      }
    },

    //查询专家模板的接口
    async expertlevel() {
      let { rows, code, total } = await getExpertlevelListApi();
      if (code == 200) {
        this.gradeTem = rows;
        this.total = total;
      }
    },

    //新增专家模板的接口
    async addexpertlevel(data) {
      let { rows, code, total } = await addExpertlevelListApi(data);
      if (code == 200) {
        this.$message({
          message: "添加成功",
          type: "success"
        });
        this.expertlevel();
      }
    },

    //删除专家等级模板的
    async deletExpertlevelList(data) {
      let { rows, msg, code } = await deletExpertlevelListApi(data);
      if (code == 200) {
        this.$message({
          message: "删除成功",
          type: "success"
        });
        this.expertlevel();
      }
    },

    //获取咨询类别的数据
    async getConsultTypeList() {
      let result = await getConsultTypeListApi(this.pageing);
      console.log(result, "result");
      if (result.code == 200) {
        this.valuetype = "5";
        let typeOne = result.rows.filter(item => item.type === "1");
        this.consultTypeList = typeOne;
      }
    },
    // 获取项目类别
    async getProjectTypelistFn() {
      let { code, rows } = await getProjectTypelistApi();
      if (code != 200) return;
      this.valuetype = "6";
      let typeOne = rows.filter(item => item.type === "1");
      this.consultTypeList = typeOne;
      console.log(this.consultTypeList, "2222");
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style scoped>
.label-box-content {
  height: 100%;
}
.el-input-number--mini {
  width: 100px;
}
.el-card >>> .top {
  border-bottom: 0;
  padding-top: 0;
}
>>> .el-card .el-card__body {
  height: 100%;
}
.label-box-content >>> .el-card__body > div {
  padding-top: 0 !important;
  height: 92%;
  overflow-y: auto;
}
.corrExpert .el-card >>> .el-card__body > div {
  overflow-y: initial;
}
>>> .el-card__body > div::-webkit-scrollbar {
  width: 0;
}

.el-row,
.el-card {
  height: 100%;
  margin-bottom: 0;
}
.el-card {
  position: relative;
}
.label-box-content >>> h1 {
  margin: 0;
  padding: 20px 0 15px 0;
}
.label-box-content >>> .top::after {
  height: 0;
}

/* 左侧菜单 */
.leftMenu {
  margin-top: 20px;
  margin-bottom: 30px;
}
.el-tag {
  position: relative;
  background-color: #f8f8f8;
  border-color: #f8f8f8;
  height: 40px !important;
  line-height: 40px !important;
  font-size: 16px;
  width: 100%;
  margin-right: 3%;
  margin-bottom: 15px;
  color: #333;
}
.el-tag > p {
  margin: 0;
  display: inline-block;
  color: #2e3f5e;
}
.el-tag > .tag-icon {
  position: absolute;
  width: 30px;
  height: 30px;
  right: 10px;
  top: 5px;
  margin: 0;
}
.el-tag > .tag-icon img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
  transition: all 0.3s;
}
.el-tag > .tag-icon:hover img {
  transform: scale(1.8);
}
.el-tag .el-input {
  width: 80px;
}
.el-tag .el-input >>> .el-input__inner {
  height: 30px;
  line-height: 30px;
  padding-left: 8px;
  padding-right: 10px;
}

.el-tag.tagActive {
  background-color: #ebecf0;
  color: #2e3f5e;
}
.el-tag >>> .el-icon-close {
  font-size: 20px;
  height: 20px;
  width: 20px;
  line-height: 20px;
  color: #f56c6c;
}
.el-tag >>> .el-icon-close:hover {
  background-color: #f56c6c;
  color: #fff;
}
.button-new-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  border: 0;
  display: block;
  width: 100%;
  font-size: 16px;
  padding: 15px 20px;
  background-color: #f8f8f8;
  border-top: 1px solid #e6ebf5;
}
.input-new-tag {
  position: absolute;
  bottom: 0;
  left: 0;
}
.leftMenu .leftSearch {
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 9;
}

/* 左侧菜单 end*/

/* 中间个人信息 */
.perInfo {
  margin-top: 20px;
}
.infoExpert {
  height: 100%;
}
.el-col-24 {
  margin-top: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e6ebf5;
}
.expertInfoImg {
  display: flex;
  align-items: center;
}
.expertInfoImg h1 {
  border-bottom: 0;
}
.expertInfoImg img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 50%;
}
.expertInfoImg h1 {
  font-weight: bold;
  font-size: 20px;
  margin-left: 20px;
}
.el-descriptions-item__label {
  margin-right: 0;
}
.certTitle {
  font-size: 20px;
}
.workExp {
  margin-top: 10px;
}
.workExp h2 {
  margin-top: 0;
  font-size: 16px;
  font-weight: bold;
}
.workExp h2 > span {
  font-size: 15px;
  font-weight: 400;
  color: #7d7d7d;
}
.workExp i {
  color: #7d7d7d;
  font-size: 13px;
}
.workExp ol {
  padding-left: 20px;
  margin-top: 10px;
}
.workExp li {
  font-size: 14px;
  line-height: 28px;
}
.historyInfo {
  margin-top: 0;
  font-size: 14px;
  line-height: 28px;
}
/* 中间个人信息end */

/* 右侧专家证书 样式 */
.expertRev {
  margin-top: 20px;
}
.expertRev .input-new-tag {
  position: initial;
}
.el-select {
  width: 100%;
}

.el-form >>> .el-form-item__content {
  position: initial;
}
.el-form-item .el-button {
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0;
  width: 100%;
  padding: 15px 20px;
}
.editTem {
  position: absolute;
  top: 14px;
  right: 20px;
}
.editTem .el-button {
  padding: 8px 4px;
  font-size: 13px;
  color: #f5873b;
}
/* 专家审核 end*/

/* 右侧抽屉 */
.drawerMain {
  padding: 0 20px;
}
.drawerMain .el-tag {
  width: 100%;
  height: auto !important;
  white-space: initial;
}
.drawerMain .input-new-tag {
  margin-bottom: 15px;
}
.classMode .el-tag {
  width: 30%;
}
::v-deep .el-tab-pane {
  height: 100%;
}

/* 表格样式 */
.el-table {
  margin-bottom: 30px;
  margin-bottom: 60px;
}
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th.is-leaf {
  /* border-top: 1px solid #efefef; */
  border-bottom: 1px solid #efefef;
}
::v-deep .el-table th > .cell {
  font-size: 12px;
  color: #909aaa;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p {
  margin: 0;
  font-size: 14px;
  color: #2e3f5e;
}
::v-deep .el-table .cell .el-input__inner {
  border: 0;
  padding: 0;
}
::v-deep .el-table .cell .el-button {
  color: #f87a23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before {
  content: "\E791";
}
::v-deep .el-table tr:hover td {
  background-color: transparent !important;
}
::v-deep .el-table td .islight {
  color: #f87a23;
}
::v-deep .el-table .el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before {
  height: 0;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf {
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td {
  border-bottom: 0;
  padding: 6px 0;
}

::v-deep .el-table__footer-wrapper tbody td {
  background-color: #fff;
  font-weight: bold;
  color: #2e3f5e;
}

/* 右侧按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px !important;
  height: 50px;
  z-index: 99;
}
::v-deep .subBtn .el-input {
  width: 200px;
  margin-right: 15px;
}
::v-deep .subBtn > .el-button {
  width: 100px;
  padding: 8px 0 !important;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn > .el-button.el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
/* 专家等级添加 */
.bottomBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
.bottomBtn > .el-button {
  width: 100%;
  border: 0;
  border-top: 1px solid #ecedf0;
  background-color: #f8f8f8;
  line-height: 25px;
  color: #606e84;
}
</style>